<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.7.2.js"></script>
</head>

<body>
    <input id="usern" type="text">
    <input id="passw" type="password">
    <button>点击登录</button>
    <script> 
        $(function () {
            const test = document.querySelector('button');
            let forUser = document.querySelector('#usern').value;
            const forPass = document.querySelector('#passw').value;
            var that = this;
            test.addEventListener('click', function() {
                console.log('用户点击了登录')
                // console.log(forUser)
                // console.log(document.querySelector('#usern').value)
                
                $.ajax({
                    type:'post',
                    url:'http://localhost:8081/api/login',
                    data:{
                        username:document.querySelector('#usern').value,
                        password:document.querySelector('#passw').value
                    },
                    success:(req,res)=>{
                        console.log(req);
                        console.log(res);
                    }
                });
            });
        })
    </script>
</body>

</html>